{% comment %}theme-check-disable TemplateLength{% endcomment %}
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
<!-- {{ 'component-slider.css' | asset_url | stylesheet_tag }} -->
{{ 'product-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">

<style>
.fr_rte button strong{
   text-decoration: underline;
}
.cgo600 .product-popup-modal__content{
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
    width: max-content;
    height: auto;
    margin: 0;
    padding: 0;
}
.cgo600 .product-popup-modal__content-info {
    padding-right: 0;
}
.cgo600 .product-popup-modal__toggle{
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
}
.cgo600 .product-popup-modal__toggle path {
    stroke: #000;
}
.cgo600 .product-popup-modal__toggle .icon{
    width: 16px;
}

.product-richtext{
  border-radius: 6px;
  background: #F4F8FC;
}
.product-richtext p{
  padding: 4px 12px;
  font-size: 14px;
  line-height: 22px; 
  color: #2F80ED;
}
.product-richtext a{
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  color: #2F80ED;

}
.extra-exclusive {
  border-radius: 4px;
  background: #E8F2FF;
  padding: 0 6px;
  line-height: 26px;
  display: inline-block;
  color: var(--web-primary-color-100, #2F80ED);
  font-family: Montserrat;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
  vertical-align: top;
}
.cgo600 .product__info-wrapper label{
  position: relative;
}
.cgo600 .product__info-wrapper label .color-sale{
  position: absolute;
  top: -38%;
  right: 28%;
}
.cgo600 .product__info-wrapper label .sale{
  position: absolute;
  top: -60%;
  right: -10px;
}
.product-sale {
  position: absolute;
  top: 20px;
  right: 20px;
}
.product-sale-value {
  position: absolute;
  top: 23px;
  left: 50px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: #000;
}
.product-sale-m {
  display: none;
}

@media screen and (max-width: 990px) {
  .product-sale {
    display: none;
  }
  .product-sale-m {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .product-sale-value {
    position: absolute;
    top: 8px;
    left: 83px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    color: #000;
  }
  .cgo600 .product-popup-modal__content{
    width: 100%;
  }
  .extra-exclusive {
    margin-bottom: 15px;
  }
}
</style>

<script src="{{ 'product-form-600.js' | asset_url }}" defer="defer"></script>

<script>

  window.onload = (event) => {
   document.querySelector("li:nth-child(1) > img").classList.add('active-thumb');
  };
  
        function newLargeImage(x) {
              let clickedImage = x.dataset.mediaId;
              const newImage = document.querySelector(`[data-media-id="${clickedImage}"]`);
              const parentData = newImage.parentElement;
  
              parentData.prepend(newImage);
              newImage.style.display = "block";
  
  document.querySelectorAll('.slide-image').forEach(thumb => thumb.classList.remove('active-thumb'));
  const sliderComp = document.querySelector("slider-component");
  document.querySelector(`[data-media-id="${clickedImage}"] > img`).classList.add('active-thumb');
  };
  </script>


{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
  <link id="ModelViewerStyle" rel="stylesheet" href="{{ 'model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
  <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<div class="twy-product cgo600-product twy-product-{{ section.id }}">
    <section class="page-width">
      {%- if section.settings.shipping != blank -%}
      <div class="twy-shipping mb-shipping">
       {{ section.settings.shipping }}
      </div>  
    {%- endif -%}
        <div class="product grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}"> 
          <div class="grid__item product__media-wrapper">
           
            
            <div class="slider-container" >
              <ul class="large-image" id="large-image">
                {% if section.settings.product_sale == true  %}
                  <div class="product-sale">
                    {% render 'product-sale' %}
                    <span class="product-sale-value">{{ section.settings.product_sale_value }}</span>
                  </div>
                  
                  <div class="product-sale-m">
                    {% render 'product-sale-m' %}
                    <span class="product-sale-value">{{ section.settings.product_sale_value }}</span>
                  </div>
                  
                {% endif %}
                {%  if section.settings.product_sale == false %}
                  <div class="coupons_metafields">
                    {%- form 'localization', id: 'FooterCountryForm' -%}
                      {% if localization.country.iso_code == 'GB' %}  
                        <div id="coupons-{{ section.id }}" class="easter-discount coupons_metafields">   
                          {%- assign product_form_id = 'product-form-' | append: section.id -%}                         
                          {% for variant in product.variants %}
                              {% if product.selected_or_first_available_variant.id == variant.id %}
                                  {% if variant.metafields.custom.coupons !=blank %}
                                  <div class="mata_coupons us-coupons">
                                    <div class="discount_icon">
                                      £200
                                    </div>
                                    {% render "icon-coupons" %}
                                    <div class="ar_blue">
                                      {{ variant.metafields.custom.coupons }}
                                      <span>
                                        £200 OFF
                                      </span>
                                    </div>
                                  </div>
                                  {% endif %}
                              {% endif %}
                            {%- endfor -%}
                        </div>   
                      {% else %}   
                        <div id="coupons_eu-{{ section.id }}" class="easter-discount coupons_metafields">   
                          {%- assign product_form_id = 'product-form-' | append: section.id -%}                         
                          {% for variant in product.variants %}
                              {% if product.selected_or_first_available_variant.id == variant.id %}
                                  {% if variant.metafields.custom.coupons_eu !=blank %}
                                  <div class="mata_coupons us-coupons">
                                    <div class="discount_icon">
                                      €200
                                    </div>
                                    {% render "icon-coupons" %}
                                    <div class="ar_blue">
                                      {{ variant.metafields.custom.coupons_eu }}
                                      <span>
                                        €200 OFF
                                      </span>
                                    </div>
                                  </div>
                                  {% endif %}
                              {% endif %}
                            {%- endfor -%}
                        </div>   
                      {% endif %}                      
                    {%- endform -%}
                  </div>
                {% endif %} 

                 {%- for media in product.media -%}
                  {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
                  {%- if product.selected_or_first_available_variant.featured_media != null -%}
                    {%- assign media = product.selected_or_first_available_variant.featured_media -%}
                    <li product-media="{{ media.alt }}" class="large-image-item product__media-item grid__item slider__slide {% if media.media_type != 'image' %} hide-modal {% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                      {% if forloop.index == 1 or forloop.index == 5 or forloop.index == 9 or forloop.index == 13 or forloop.index == 17 %}
                      <div class="tenways-fietstest tenways_600">
                        <picture>
                          <source media="(max-width: 990px)" srcset="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/rad.png?v=1678167513" width="50" height="64" />
                          <source media="(min-width: 991px)" srcset="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/rad.png?v=1678167513" width="70" height="90"/>
                          <img src="https://cdn.shopify.com/s/files/1/0563/3926/7733/files/rad.png?v=1678167513" alt="tenways-fietstest" width="70" height="90" />
                        </picture>
                      </div>
                    {% endif %}  
                      {% render 'product-cgo600', media: media, position: forloop.index, shipping:section.settings.shipping, loop: section.settings.enable_video_looping, feature1:section.settings.feature1, feature2:section.settings.feature2, feature3:section.settings.feature3, modal_id: section.id, xr_button: true %}
                    </li>
                  {%- endif -%}
                     <li product-media="{{ media.alt }}" class="large-image-item product__media-item grid__item slider__slide {% if media.media_type != 'image' %} hide-modal {% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                      {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}                 
                     {% render 'product-cgo600', media: media, position: forloop.index, shipping:section.settings.shipping, loop: section.settings.enable_video_looping, feature1:section.settings.feature1, feature2:section.settings.feature2, feature3:section.settings.feature3, modal_id: section.id, xr_button: true %}
                    {%- endunless -%} 
                   </li>
                 {%- endfor -%}
               </ul>
  
               <slider-component >
                <ul class="product-slider-box slider" id="product-slider-box" role="list">
             
              {%- assign variant_images = product.images| where: 'attached_to_variant?', true | map: 'src' -%}
             
             {%- for media in product.media -%}
                   <li thumbnail-color="{{ media.alt }}" class="product-slider slider__slide" onclick="newLargeImage(this)" data-media-id="{{ section.id }}-{{ media.id }}"
             
                    {% if section.settings.hide_variants and variant_images contains media.src %} style="display: none;" {% endif %}>
             
                      {% if media.media_type == 'video' %}
                       <div class="video-btn" style="display: block" >
                          <span class="product__media-icon motion-reduce v-btn" aria-hidden="true">
                              {%- liquid
                                case media.media_type
                                when 'video' or 'external_video'
                                render 'icon-play'
                                when 'model'
                                render 'icon-3d-model'
                                else
                                render 'icon-zoom'
                               endcase
                             -%}
                          </span>
                        <img class="lazyload slide-image" src="{{ media.preview_image | img_url: 'large' }}" alt="{{ media.alt }}">
                      </div>
                   {% else %}
                     <img class="lazyload slide-image" src="{{ media.preview_image | img_url: 'large' }}" alt="{{ media.alt }}">
                 {% endif %}
                </li>
             {% endfor %}
             </ul>
              </slider-component>
   
            </div>


            {%- if first_3d_model -%}
              <button
                class="button button--full-width product__xr-button"
                type="button"
                aria-label="{{ 'products.product.xr_button_label' | t }}"
                data-shopify-xr
                data-shopify-model3d-id="{{ first_3d_model.id }}"
                data-shopify-title="{{ product.title | escape }}"
                data-shopify-xr-hidden
              >
                {% render 'icon-3d-model' %}
                {{ 'products.product.xr_button' | t }}
              </button>
            {%- endif -%}

            
            <div class="m_feature product__media-title">
              <div class="media-title-list"><span>{% render 'icon-shipping' %}</span><p> {{ section.settings.html_1 }}  </p></div>
              <div class="media-title-list"><span>{% render 'icon-vat' %}</span><p>{{ section.settings.html_2 }}  </p></div>
             <div class="media-title-list"><span>{% render 'icon-warranty' %}</span><p> {{ section.settings.html_3 }} </p></div>
             </div>

          </div>
          <div class="product__info-wrapper grid__item">
            <div id="ProductInfo-{{ section.id }}" class="product__info-container{% if section.settings.enable_sticky_info %} product__info-container--sticky{% endif %}">
              
              {%- assign product_form_id = 'product-form-' | append: section.id -%}
      
              {%- for block in section.blocks -%}
                {%- case block.type -%}
                {%- when '@app' -%}
                  {% render block %}
                {%- when 'text' -%}
                  <p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
                    {{- block.settings.text -}}
                  </p>
                  <div class="cgo-title">
                    {% if section.settings.exclusive != blank %}
                      <span class="extra-exclusive"> {{ section.settings.exclusive  }}</span>
                    {% endif %}
                   <div class="cgoTitle">
                    {{- block.settings.richtext -}}
                   </div>
                   <div class="des">
                    {{- block.settings.des -}}
                   </div>
                 

                  </div>
              
                    {%- if block.settings.p_des != blank -%}
                  <div class="tenways-p_des">
                      {{ block.settings.p_des }}
                 </div> 
              
              {%- else -%} 
              
              <div class="discount-img">
              
             {%- if block.settings.image != blank -%}   
               <img
                          srcset="
                          {%- if block.settings.image.width >= 375 -%}{{ block.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                         {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                         {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                         {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                         {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                         {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}"
                         sizes="{% if block.settings.image_2 != blank and block.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                         src="{{ block.settings.image | img_url: '1500x' }}"
                         loading="lazy"
                         alt="{{ block.settings.image.alt | escape }}"
                         width="{{ block.settings.image.width }}"
                         height="{{ block.settings.image.height }}"
                         >
              {%- endif -%} 
              </div>
              
                 {%- endif -%} 
              
              
                {%- when 'title' -%}
                  <h1 class="product__title" {{ block.shopify_attributes }}>
                    {{ product.title | escape }}
                  </h1>
                {%- when 'price' -%}
                  <div class="no-js-hidden tenways-price" id="price-{{ section.id }}" {{ block.shopify_attributes }}>
                    {%- render 'price-600', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
                    <!-- {%- if block.settings.shipping != blank -%}
                    <div class="tenways-shipping">
                      {% render 'icon-shipping' %} {{ block.settings.shipping }}
                    </div>  
                 {%- endif -%} -->
                  </div>
                  <div {{ block.shopify_attributes }}>
                    {%- form 'product', product, id: 'product-form-installment', class: 'installment caption-large' -%}
                      <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                      {{ form | payment_terms }}
                    {%- endform -%}
                  </div>
                 
                  {%- if section.settings.show_cart_accessories -%}
                                <div class="free us-free">
                                {%- liquid
                  assign products_to_display = section.settings.collection.all_products_count
                  
                  if section.settings.collection.all_products_count > section.settings.products_to_show
                  assign products_to_display = section.settings.products_to_show
                  assign more_in_collection = true
                  endif
                  -%}
                  <div class="cart_collection collection{% if section.settings.swipe_on_mobile == true and section.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
                  <div class="free-title{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
                    <h2> 
                      {%- form 'localization', id: 'FooterCountryForm' -%}
                        {% if localization.country.currency.symbol contains '$' and localization.country.currency.symbol != blank %}
                           {% if section.settings.us_title != blank %}
                           {{ section.settings.us_title | escape }} 
                           {% else %}
                           {{ section.settings.collection_title | escape }}                  
                           {% endif %}
                        {% else %}
                        {{ section.settings.collection_title | escape }}  
                        {% endif %}
                    {%- endform -%}
                     <span> {% render 'icon-free' %} </span> </h2>
                  
                  {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
                  <a href="{{ section.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
                  {%- endif -%}
                  </div>
                  
                  <slider-component class="slider-mobile-gutter">
                   <div class="fr_rte">
                    {{ section.settings.text }}
                        <!-- <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ section.id }}" >
                        <button id="ProductPopup-{{ section.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">{{ section.settings.text }}</button>
                      </modal-opener> -->
                    </div>
                  <ul class="{% if section.settings.collection.all_products_count == 4 %} grid--4-col {% elsif section.settings.collection.all_products_count == 3  %} grid--3-col {% elsif section.settings.collection.all_products_count == 2  %} grid--2-col {% endif %} grid  product-grid{% if products_to_display == 4 or section.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or section.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
                  {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
                  <li class="grid__item{% if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
                    {% render 'product-card-free',
                    product_card_product: product,
                    media_size: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    add_image_padding: section.settings.add_image_padding,
                    show_vendor: section.settings.show_vendor,
                    show_image_outline: section.settings.show_image_outline,
                    show_rating: section.settings.show_rating,
                    free: section.settings.free,
                    us_free: section.settings.us_free,
                    eu_free: section.settings.eu_free
                  %}
                  </li>
                  {%- else -%}
                  {%- for i in (1..4) -%}
                  <li class="grid__item">
                    {% render 'product-card-placeholder' %}
                      {%- if section.settings.free != blank -%}
                                  <div class="free_p">{{ section.settings.free | escape }}</div>
                                {%- endif -%}
                  </li>
                  {%- endfor -%}
                  {%- endfor -%}
                  </ul>
                  {%- if section.settings.text_1 != blank -%}
                    <div class="fr_rte fr_text_1">{{ section.settings.text_1 }}</div>
                  {%- endif -%}
                  </slider-component>
                
                  </div>
                </div>
              {%- endif -%}
                
                {%- when 'description' -%}
                  {%- if product.description != blank -%}
                    <div class="product__description rte">
                      {{ product.description }}
                    </div>
                  {%- endif -%}

                  {%- when 'ISO' -%}
                    {% assign IsoCode = block.settings.iso_code | split: ',' %}
                    {% if IsoCode contains localization.country.iso_code %}
                      <div class="iso_code">
                        {{ block.settings.text }}                       
                        {% if block.settings.text_1 != blank  %}
                          {% assign IsoCode1 = block.settings.iso_1 | split: ',' %}
                          {% if IsoCode1 contains localization.country.iso_code %}
                            <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_1 }}</span> </div>                           
                          {% endif %}
                        {% endif %}
                        {% if block.settings.text_2 != blank  %}
                        {% assign IsoCode2 = block.settings.iso_2 | split: ',' %}
                        {% if IsoCode2 contains localization.country.iso_code %}
                          <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_2 }}</span> </div>                           
                        {% endif %}
                       {% endif %}
                        {% if block.settings.text_3 != blank  %}
                        {% assign IsoCode3 = block.settings.iso_3 | split: ',' %}
                        {% if IsoCode3 contains localization.country.iso_code %}
                          <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_3 }}</span> </div>                           
                        {% endif %}
                      {% endif %}
                      {% if block.settings.text_4 != blank  %}
                      {% assign IsoCode4 = block.settings.iso_4 | split: ',' %}
                      {% if IsoCode4 contains localization.country.iso_code %}
                        <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_4 }}</span> </div>                           
                      {% endif %}
                    {% endif %}
                    {% if block.settings.text_5 != blank  %}
                    {% assign IsoCode5 = block.settings.iso_5 | split: ',' %}
                    {% if IsoCode5 contains localization.country.iso_code %}
                      <div class="text"> <span>{% render 'icon-ky' %}</span> <span class="span">{{ block.settings.text_5 }}</span> </div>                           
                    {% endif %}
                  {% endif %}
                      </div>
                    {% endif %}   

                    {%- when 'list-payment' -%}     
                      <ul class="list list-payment" role="list">
                        {%- for type in shop.enabled_payment_types -%}
                          <li class="list-payment__item">
                            {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                          </li>
                        {%- endfor -%}
                        {% assign IsoCode = block.settings.iso_code | split: ',' %}
                        {% if IsoCode contains localization.country.iso_code %}
                          <li class="list-payment__item">{% render 'icon-klaran' %}</li>
                        {% endif %}
                      </ul> 
    
              
              {%- when 'coupons' -%}
                
                 <div {{ block.shopify_attributes }}>
               <div class="coupons">
                     <div class="coupons-left">
                       {%- if block.settings.html != blank -%}  
                           <span>{{ block.settings.html }}</span>
                          {%- endif -%} 
                     
                     </div>                    
                     <div class="coupons-right">
                          <!-- {%- if block.settings.text != blank -%}  
                           <p>{{ block.settings.text }}</p>
                         {%- endif -%}  -->
                         {%- if block.settings.richtext != blank -%}  
                           <div>{{ block.settings.richtext }}</div>
                         {%- endif -%} 
                     </div>
                   </div>
                 </div>
              
                {%- when 'custom_liquid' -%}
                  {{ block.settings.custom_liquid }}
                {%- when 'collapsible_tab' -%}
                  <div class="product__accordion accordion" {{ block.shopify_attributes }}>
                    <details>
                      <summary>
                        <div class="summary__title">
                          {% render 'icon-accordion', icon: block.settings.icon %}
                          <h2 class="h4 accordion__title">
                            {{ block.settings.heading | default: block.settings.page.title }}
                          </h2>
                        </div>
                        {% render 'icon-caret' %}
                      </summary>
                      <div class="accordion__content rte">
                        {{ block.settings.content }}
                        {{ block.settings.page.content }}
                      </div>
                    </details>
                  </div>
                {%- when 'quantity_selector' -%}
                  <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                    <label class="form__label" for="Quantity-{{ section.id }}">
                      {{ 'products.product.quantity.label' | t }}
                    </label>
      
                    <quantity-input class="quantity">
                      <button class="quantity__button no-js-hidden" name="minus" type="button">
                        <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                        {% render 'icon-minus' %}
                      </button>
                      <input class="quantity__input"
                          type="number"
                          name="quantity"
                          id="Quantity-{{ section.id }}"
                          min="1"
                          value="1"
                          form="product-form-{{ section.id }}"
                        >
                      <button class="quantity__button no-js-hidden" name="plus" type="button">
                        <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                        {% render 'icon-plus' %}
                      </button>
                    </quantity-input>
                  </div>
                {%- when 'popup' -%}
                    <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ block.id }}" {{ block.shopify_attributes }}>
                      <button id="ProductPopup-{{ block.id }}" class="product-popup-modal__button link" type="button" aria-haspopup="dialog">{{ block.settings.text | default: block.settings.page.title }}</button>
                    </modal-opener>
                    <a href="{{ block.settings.page.url }}" class="product-popup-modal__button link no-js">{{ block.settings.text }}</a>
                {%- when 'share' -%}
                  <share-button class="share-button" {{ block.shopify_attributes }}>
                    <button class="share-button__button hidden">
                      {% render 'icon-share' %}
                      {{ block.settings.share_label | escape }}
                    </button>
                    <details>
                      <summary class="share-button__button">
                        {% render 'icon-share' %}
                        {{ block.settings.share_label | escape }}
                      </summary>
                      <div id="Product-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                        <div class="field">
                          <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
                          </span>
                          <input type="text"
                                class="field__input"
                                id="url"
                                value="{{ shop.url | append: product.url }}"
                                placeholder="{{ 'general.share.share_url' | t }}"
                                onclick="this.select();"
                                readonly
                          >
                          <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                        </div>
                        <button class="share-button__close hidden no-js-hidden">
                          {% render 'icon-close' %}
                          <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                        </button>
                        <button class="share-button__copy no-js-hidden">
                          {% render 'icon-clipboard' %}
                          <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                        </button>
                      </div>
                    </details>
                  </share-button>
                  <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
                {%- when 'variant_picker' -%}
                  {%- unless product.has_only_default_variant -%}
                  {%- if block.settings.picker_type == 'button' -%}
              
                <strong>{{ variant.metafields.my_fields.size.first }}</strong>    
                  <variants-radios class="no-js-hidden transcy-click-currency" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                   
                    {%- assign color_label = 'Color,Kleur,color,Colour,Couleur,colore,Colore,Farbe,farbe,색,色,färg,farve' | split: ',' -%}
                    {%- assign size_label = 'Size,Maat,Dimensioni,Taille,Größe,Tamaño' | split: ',' -%}
                    {%- assign deliver_label = 'Deliver to,Bezorgen aan,Spedire a,Livrer à,Liefern an,Enviar a' | split: ',' -%}
                    {%- assign downcased_option = option.name | downcase -%}
                 
                   
                    {%- assign file_extension = 'png' -%}
                    
                                     
                    {%- if color_label  contains  option.name -%}
                     
                        <fieldset class="js product-form__input color" data-color="color" id="color_fieldset">
                      
                            <legend class="form__label">{{ option.name }} - <span id="color_label" class="color_label-{{ section.id }}"> {{ option.selected_value }} </span></legend>
                                    {%- for value in option.values -%}
                                  
                                      <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                            name="{{ option.name }}"
                                            value="{{ value | escape }}"
                                            form="product-form-{{ section.id }}"
                                            {% if option.selected_value == value %}checked{% endif %}
                                      >
                                      {%- if show_badges -%}
                                   <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}" aria-hidden="true">
                                     {{ 'products.product.sold_out' | t }}
                                   </span>
                                   {%- endif -%}
                                      <label class="cs_label" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                        <img loading="lazy" class="cs_img" src="{{ value | handle | append: '.' | append: file_extension | asset_url  }}" width="33" height="33" alt="tenways_ebike" />
                                      </label>
                                    {%- endfor -%}
                       </fieldset>
                    
                     {% elsif size_label contains  option.name %}
                    
                        <span id="size_label">{{ option.selected_value }}</span>
                        <fieldset class="js product-form__input size" id="size_on">
                        <legend data-size="XL" id="size_label1" class="form__label">{{ option.name }} - {{ section.settings.size_label1 }} </legend>
                        <legend data-size="L" id="size_label2" class="form__label">{{ option.name }} - {{ section.settings.size_label2 }}</legend>
                        <legend data-size="M" id="size_label3" class="form__label">{{ option.name }} - {{ section.settings.size_label3 }}</legend>
                        <legend data-size="S" id="size_label4" class="form__label">{{ option.name }} - {{ section.settings.size_label4 }}</legend>
                        {%- for value in option.values -%}
                          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                name="{{ option.name }}"
                                value="{{ value | escape }}"
                                form="product-form-{{ section.id }}"
                                {% if option.selected_value == value %}checked{% endif %}
                          >
                          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                            {{ value }}
                          </label>
                        {%- endfor -%}
                      </fieldset> 
                    
                     

                      {% else deliver_label contains  option.name %}
    
                    
                   
                    
                       <fieldset class="js product-form__input" id="deliver_on">
                                    <legend class="form__label">{{ option.name }} 
                                      <span class="tenways-tip">{% render 'tenways-tip' %}</span>
                                      <div class="field-tooltip-content">
                                        {{ product.metafields.my_fields.deliver }}
                                      </div>
                                     </legend>
                                    {%- for value in option.values -%}
                                      <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                            name="{{ option.name }}"
                                            value="{{ value | escape }}"
                                            form="product-form-{{ section.id }}"
                                            {% if option.selected_value == value %}checked{% endif %}
                                      >
                                      <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                                        {{ value }}
                                      </label>
                                    {%- endfor -%}
                        </fieldset>

                        {% if section.settings.size_one != blank %}
                    
                         <div class="size_one">
                          {{ section.settings.size_one }}
                        </div>
                    
                    {% endif %}  
                    
                    {%- endif -%}                
                     {%- endfor -%}

                       
                          <script type="application/json">
                                {{ product.variants | json }}
                              </script>
                      
                  </variants-radios>
                  {%- else -%}
                  <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" data-update-url="false" {{ block.shopify_attributes }}>
                    {%- for option in product.options_with_values -%}
                      <div class="product-form__input product-form__input--dropdown">
                        <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                          {{ option.name }}
                        </label>
                        <div class="select">
                          <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                            class="select__select"
                            name="options[{{ option.name | escape }}]"
                            form="product-form-{{ section.id }}"
                          >
                            {%- for value in option.values -%}
                              <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                                {{ value }}
                              </option>
                            {%- endfor -%}
                          </select>
                          {% render 'icon-caret' %}
                        </div>
                      </div>
                    {%- endfor -%}
  
                    <script type="application/json">
                      {{ product.variants | json }}
                    </script>
                  </variant-selects>
                {%- endif -%}
                  {%- endunless -%}
      
                  <noscript class="product-form__noscript-wrapper-{{ section.id }}">
                    <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
                      <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
                      <div class="select">
                        <select name="id" id="Variants-{{ section.id }}" class="select__select" form="product-form">
                          {%- for variant in product.variants -%}
                            <option
                              {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                              {% if variant.available == false %}disabled{% endif %}
                              value="{{ variant.id }}"
                            >
                              {{ variant.title }}
                              {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                              - {{ variant.price | money | strip_html }}
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon-caret' %}
                      </div>
                    </div>
                  </noscript>
                  {%- when 'shipping_time' -%}         
                  <div id="metafields-{{ section.id }}" class="shipping_metafields" {{ block.shopify_attributes }} style="color: {{ block.settings.text_color }};">                            
                    {% for variant in product.variants %}
                         {% if product.selected_or_first_available_variant.id == variant.id %}
                            {{ variant.metafields.custom.shipping_time }}
                        {% endif %} 
                    {% endfor %} 
                 </div> 
                 {%- when 'Richtext' -%}    
                  {% if block.settings.richtext != blank %}
                    <div class="product-richtext richtext">
                     {{ block.settings.richtext }}
                    </div>
                  {% endif %}
                {%- when 'buy_buttons' -%}
                {%- if section.settings.payment_enable -%}
                <div class="mb-footer_payment footer__payment">
                  <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
                  <ul class="list list-payment" role="list">
                    {%- for type in shop.enabled_payment_types -%}
                      <li class="list-payment__item">
                        {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                      </li>
                    {%- endfor -%}
                    <li class="list-payment__item">{% render 'icon-klaran' %}</li>
                  </ul>
                </div>
              {%- endif -%}
                  <div {{ block.shopify_attributes }}>
                    <product-form class="product-form">
                      <div class="product-form__error-message-wrapper" role="alert" hidden>
                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                        </svg>
                        <span class="product-form__error-message"></span>
                      </div>
      
                      {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                        <div class="product-form__buttons">
                          <button
                            type="submit"
                            name="add"
                            class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                          {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                          >
                              <span>
                                {%- if product.selected_or_first_available_variant.available -%}
                                  {{ 'products.product.add_to_cart' | t }}
                                {%- else -%}
                                  {{ 'products.product.sold_out' | t }}
                                {%- endif -%}
                              </span>
                              <div class="loading-overlay__spinner hidden">
                                <svg width="18" height="18" aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                                </svg>
                              </div>
                          </button>
                          {%- if block.settings.show_dynamic_checkout -%}
                            {{ form | payment_button }}
                          {%- endif -%}
                        </div>
                      {%- endform -%}
                    </product-form>
                      
                      <a class="tenways-klaviyo button klaviyo-bis-trigger" href="#">{{ section.settings.notify_me }}</a>
      
                    {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}
      
                    {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%}
      
                    <pickup-availability class="product__pickup-availabilities no-js-hidden"
                      {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %} available{% endif %}
                      data-base-url="{{ shop.url }}{{ routes.root_url }}"
                      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                      data-has-only-default-variant="{{ product.has_only_default_variant }}"
                    >
                      <template>
                        <pickup-availability-preview class="pickup-availability-preview">
                          {% render 'icon-unavailable' %}
                          <div class="pickup-availability-info">
                            <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
                            <button class="pickup-availability-button link link--text underlined-link">{{ 'products.product.pickup_availability.refresh' | t }}</button>
                          </div>
                        </pickup-availability-preview>
                      </template>
                    </pickup-availability>
                  </div>
      
                  <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
                {%- when 'rating' -%}
                  {%- if product.metafields.reviews.rating.value != blank -%}
                    {% liquid
                     assign rating_decimal = 0
                     assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
                     if decimal >= 0.3 and decimal <= 0.7
                      assign rating_decimal = 0.5
                    elsif decimal > 0.7
                      assign rating_decimal = 1
                     endif
                    %}
                    <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
                      <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
                    </div>
                    <p class="rating-text caption">
                      <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
                    </p>
                    <p class="rating-count caption">
                      <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
                      <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
                    </p>
                  {%- endif -%}
                {%- endcase -%}
              {%- endfor -%}

              {%- if section.settings.payment_enable -%}
              <div class="pc-footer_payment footer__payment">
                <span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
                <ul class="list list-payment" role="list">
                  {%- for type in shop.enabled_payment_types -%}
                    <li class="list-payment__item">
                      {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
                    </li>
                  {%- endfor -%}
                  <li class="list-payment__item">{% render 'icon-klaran' %}</li>
                </ul>
              </div>
            {%- endif -%}


            {%- if section.settings.show_klarna != blank -%}
            <div class="tenways-klarna">
              <span>{% render 'icon-notice' %}</span>
              {{ section.settings.show_klarna }}
            </div>
          {%- endif -%}

            </div>
          </div>
        </div>
      
        <product-modal id="ProductModal-{{ section.id }}" class="product-media-modal media-modal">
          <div class="product-media-modal__dialog" role="dialog" aria-label="{{ 'products.modal.label' | t }}" aria-modal="true" tabindex="-1">
            <button id="ModalClose-{{ section.id }}" type="button" class="product-media-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
      
            <div class="product-media-modal__content" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
              {%- liquid
                if product.selected_or_first_available_variant.featured_media != null
                  assign media = product.selected_or_first_available_variant.featured_media
                  render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: section.settings.hide_variants
                endif
              -%}
      
              {%- for media in product.media -%}
                {%- liquid
                  if section.settings.hide_variants and variant_images contains media.src
                    assign variant_image = true
                  else
                    assign variant_image = false
                  endif
      
                  unless media.id == product.selected_or_first_available_variant.featured_media.id
                    render 'product-media', media: media, loop: section.settings.enable_video_looping, variant_image: variant_image
                  endunless
                -%}
              {%- endfor -%}
            </div>
          </div>
        </product-modal>
      
        {% assign popups = section.blocks | where: "type", "popup" %}
        {%- for block in popups -%}
          <modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
            <div role="dialog" aria-label="{{ block.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
              <button id="ModalClose-{{ block.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
              <div class="product-popup-modal__content-info">
                <h1 class="h2">{{ block.settings.page.title }}</h1>
                {{ block.settings.page.content }}
              </div>
            </div>
          </modal-dialog>
        {%- endfor -%}


       <modal-dialog id="PopupModal-{{ section.id }}" class="product-popup-modal">
        <div role="dialog" aria-label="{{ block.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
          <button id="ModalClose-{{ section.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}"> {% render 'icon-close' %}</button>
          <div class="product-popup-modal__content-info">
            <div class="klaviyo-form-R2ikX9"></div>
          </div>
        </div>
      </modal-dialog>
                            
      </section>
</div>


{% javascript %}
  class ProductModal extends ModalDialog {
    constructor() {
      super();
    }

    hide() {
      super.hide();
    }

    show(opener) {
      super.show(opener);
      this.showActiveMedia();
    }

    showActiveMedia() {
      this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => {
          element.classList.remove('active');
        }
      )
      const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`);
      const activeMediaTemplate = activeMedia.querySelector('template');
      const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
      activeMedia.classList.add('active');
      activeMedia.scrollIntoView();

      const container = this.querySelector('[role="document"]');
      container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;

      if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube'))
        activeMedia.loadContent();
    }
  }

  customElements.define('product-modal', ProductModal);
{% endjavascript %}

<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
    const noScriptInputWrapper = document.createElement('div');
    const variantSwitcher = document.querySelector('variant-radios[data-section="{{ section.id }}"]') || document.querySelector('variant-selects[data-section="{{ section.id }}"]');
    noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ section.id }}').textContent;
    variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;

    document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function(event) {
      hiddenInput.value = event.currentTarget.value;
    });
  });
</script>

<script>
  function addToCart(cart){
    let formCgo = {
      'sections': cart.getSectionsToRender().map((section) => section.id),
    'items': [{
      'id': 41121211056277,
      'quantity': 1
      },
      {
      'id': 41420008751253,
      'quantity': 1
      },   
    ]
    };
      
    return fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formCgo),
    })
  }
</script> 

{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>

  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}



<script>

  $('[thumbnail-color]').hide();

  var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");

  var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
  
  var FirstsThumbnail = $(color_attribute).first();
  
  $(color_attribute).show();

  FirstsThumbnail.click();
  
  </script> 
  


<script>
  $(window).ready(function() {

 $('#size_on [data-size]').hide();
  var size_variants = document.getElementById('size_label').innerHTML.replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
  var size_attribute = $('#size_on [data-size="' + size_variants + '"]');
  size_attribute.show();

})

$(window).ready(function() {
  var U_color = document.getElementById('color_label');
  $("#color_fieldset input").each(function(){
     $(this).click(function(){
		  var name = $(this).attr('value');
		  U_color.innerHTML = name;
	 });
  });
})
</script>
{% comment %}
<script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": {{ product.title | json }},
    "url": {{ shop.url | append: product.url | json }},
    {%- if product.selected_or_first_available_variant.featured_media -%}
      {%- assign media_size = product.selected_or_first_available_variant.featured_media.preview_image.width | append: 'x' -%}
      "image": [
        {{ product.selected_or_first_available_variant.featured_media | img_url: media_size | prepend: "https:" | json }}
      ],
    {%- endif -%}
    "description": {{ product.description | strip_html | json }},
    {%- if product.selected_or_first_available_variant.sku != blank -%}
      "sku": {{ product.selected_or_first_available_variant.sku | json }},
    {%- endif -%}
    "brand": {
      "@type": "Thing",
      "name": {{ product.vendor | json }}
    },
    "offers": [
      {%- for variant in product.variants -%}
        {
          "@type" : "Offer",
          {%- if variant.sku != blank -%}
            "sku": {{ variant.sku | json }},
          {%- endif -%}
          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : {{ variant.price | divided_by: 100.00 | json }},
          "priceCurrency" : {{ cart.currency.iso_code | json }},
          "url" : {{ shop.url | append: variant.url | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  }
</script>
{% endcomment %}



{% schema %}
{
  "name": "Twy product 600",
  "tag": "section",
  "class": "product-section spaced-section",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "text",
      "name": "t:sections.main-product.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Text block",
          "label": "t:sections.main-product.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "uppercase",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.main-product.blocks.text.settings.text_style.label"
        },
        {
          "type": "richtext",
          "id": "richtext",
          "default": "<p>Text block</p>",
          "label": "Product title"
        },
        {
          "type": "text",
          "id": "des",
          "default": "prodyct des",
          "label": "Prodyct des"
        },
       {
          "type": "richtext",
          "id": "p_des",
          "label": "Tenways love"
        },
     {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.main-product.blocks.title.name",
      "limit": 1
    },
    {
      "type": "price",
      "name": "t:sections.main-product.blocks.price.name",
      "limit": 1,
      "settings": [
      {
      "type": "richtext",
      "id": "shipping",
      "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
      "label": "Shipping"
    }
    ]
    },
    {
      "type": "quantity_selector",
      "name": "t:sections.main-product.blocks.quantity_selector.name",
      "limit": 1
    },
    {
      "type": "variant_picker",
      "name": "t:sections.main-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
            },
            {
              "value": "button",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
            }
          ],
          "default": "button",
          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
        }
      ]
    },
    {
      "type": "shipping_time",
      "name": "Shipping Time",
      "limit": 1,
      "settings": [
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color"
        }
      ]
    },
    {
      "type": "Richtext",
      "name": "Richtext",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "richtext",
          "label": "Richtext"
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "t:sections.main-product.blocks.buy_buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
          "info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
        }
      ]
    },
    {
      "type": "description",
      "name": "t:sections.main-product.blocks.description.name",
      "limit": 1
    },
  {
      "type": "coupons",
      "name": "coupons",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
       {
          "type": "richtext",
          "id": "richtext",
          "label": "Richtext"
        },
        {
          "type": "html",
          "id": "html",
          "label": "html"
        }
      ]
    },
    {
      "type": "share",
      "name": "t:sections.main-product.blocks.share.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.main-product.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.title_info.content"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.main-product.blocks.custom_liquid.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label",
          "info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
        }
      ]
    },
    {
      "type": "collapsible_tab",
      "name": "t:sections.main-product.blocks.collapsible_tab.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Collapsible tab",
          "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        },
        {
          "type": "page",
          "id": "page",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label"
        },
        {
          "type": "select",
          "id": "icon",
          "options": [
            {
              "value": "none",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label"
            },
            {
              "value": "box",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label"
            },
            {
              "value": "chat_bubble",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label"
            },
            {
              "value": "check_mark",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label"
            },
            {
              "value": "dryer",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label"
            },
            {
              "value": "eye",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label"
            },
            {
              "value": "heart",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label"
            },
            {
              "value": "iron",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label"
            },
            {
              "value": "leaf",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label"
            },
            {
              "value": "leather",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label"
            },
            {
              "value": "lock",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label"
            },
            {
              "value": "map_pin",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label"
            },
            {
              "value": "pants",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label"
            },
            {
              "value": "plane",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label"
            },
            {
              "value": "price_tag",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label"
            },
            {
              "value": "question_mark",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label"
            },
            {
              "value": "return",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label"
            },
            {
              "value": "ruler",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label"
            },
            {
              "value": "shirt",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label"
            },
            {
              "value": "shoe",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label"
            },
            {
              "value": "silhouette",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label"
            },
            {
              "value": "star",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label"
            },
            {
              "value": "truck",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label"
            },
            {
              "value": "washing",
              "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label"
            }
          ],
          "default": "check_mark",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label"
        }
      ]
    },
    {
      "type": "ISO",
      "name": "ISO",
      "settings": [
        {
          "type": "html",
          "id": "iso_code",
          "label": "Iso code"
        },
        {
          "type": "text",
          "id": "text",
          "label": "text"
        },
        {
          "type": "html",
          "id": "iso_1",
          "label": "Iso 1"
        },
        {
          "type": "text",
          "id": "text_1",
          "label": "text 1"
        },
        {
          "type": "html",
          "id": "iso_2",
          "label": "Iso 2"
        },
        {
          "type": "text",
          "id": "text_2",
          "label": "text 2"
        },
        {
          "type": "html",
          "id": "iso_3",
          "label": "Iso 3"
        },
        {
          "type": "text",
          "id": "text_3",
          "label": "text 3"
        },
        {
          "type": "html",
          "id": "iso_4",
          "label": "Iso 4"
        },
        {
          "type": "text",
          "id": "text_4",
          "label": "text 4"
        },
        {
          "type": "html",
          "id": "iso_5",
          "label": "Iso 5"
        },
        {
          "type": "text",
          "id": "text_5",
          "label": "text 5"
        }
      ]
    },
    {
      "type": "list-payment",
      "name": "list-payment",
      "limit": 1,
      "settings": [
        {
          "type": "html",
          "id": "iso_code",
          "label": "Iso code"
        }
      ]
    },
    {
      "type": "popup",
      "name": "t:sections.main-product.blocks.popup.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Pop-up link text",
          "label": "t:sections.main-product.blocks.popup.settings.link_label.label"
        },
        {
          "id": "page",
          "type": "page",
          "label": "t:sections.main-product.blocks.popup.settings.page.label"
        }
      ]
    },
    {
      "type": "rating",
      "name": "t:sections.main-product.blocks.rating.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.rating.settings.paragraph.content"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "product_sale",
      "label": "product sale",
      "default": false
    },
    {
      "type": "text",
      "id": "product_sale_value",
      "label": "product sale text",
      "default": "400 OFF"
    },
    {
      "type": "text",
      "id": "exclusive",
      "label": "Online Exclusive"
    },
    {
      "type": "checkbox",
      "id": "enable_sticky_info",
      "default": true,
      "label": "t:sections.main-product.settings.enable_sticky_info.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.settings.header.content",
      "info": "t:sections.main-product.settings.header.info"
    },
   {
      "type": "text",
      "id": "notify_me",
       "default": "Notify me",
      "label": "Notify me"
    },
    {
      "type": "richtext",
      "id": "shipping",
      "label": "Shipping"
    },
   {
      "type": "text",
      "id": "de_one",
      "label": "EU"
    },
    {
      "type": "text",
      "id": "de_two",
      "label": "UK"
    },
    {
      "type": "text",
      "id": "de_three",
      "label": "US"
    },
    {
      "type": "checkbox",
      "id": "hide_variants",
      "default": false,
      "label": "t:sections.main-product.settings.hide_variants.label"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "t:sections.main-product.settings.enable_video_looping.label"
    },
    {
      "type": "checkbox",
      "id": "payment_enable",
      "default": true,
      "label": "Show payment icons"
    },
    {
      "type": "header",
      "content": "FREE Accessories"
    },
    {
      "type": "checkbox",
      "id": "show_cart_accessories",
      "default": false,
      "label": "Show Accessories"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "text",
      "id": "collection_title",
      "label": "Featured collection"
    },
    {
      "type": "text",
      "id": "us_title",
      "label": "US title"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Des"
    },
    {
      "type": "richtext",
      "id": "us_text",
      "label": "US Des"
    },
    {
      "type": "richtext",
      "id": "text_1",
      "label": "Text 1"
    },
   {
          "type": "text",
          "id": "size_one",
          "label": "One size"
        },
    {
      "type": "text",
      "id": "free",
      "label": "Free"
    },
    {
      "type": "text",
      "id": "us_free",
      "label": "Us Free"
    },
    {
      "type": "text",
      "id": "eu_free",
      "label": "EU Free"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "products to show"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "Show_view_all"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "swipe_on_mobile"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "adapt"
        },
        {
          "value": "portrait",
          "label": "portrait"
        },
        {
          "value": "square",
          "label": "square"
        }
      ],
      "default": "adapt",
      "label": "adapt"
    },
    {
      "type": "richtext",
      "id": "show_free_acc",
      "label": "Show Free Acc"
    },
    {
      "type": "richtext",
      "id": "show_klarna",
      "label": "Show klarna"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "show_secondary_image"
    },
    {
      "type": "checkbox",
      "id": "add_image_padding",
      "default": false,
      "label": "add_image_padding"
    },
    {
      "type": "checkbox",
      "id": "show_image_outline",
      "default": true,
      "label": "show_image_outline"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "show_vendor"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "show_rating",
      "info": "show_rating"
    },
    {
      "type": "text",
      "id": "size_label1",
      "label": "Size label1",
      "default": "For rider height - 165~185cm"
    },
    {
      "type": "text",
      "id": "size_label2",
      "label": "Size label2",
      "default": "For rider height - 180~200cm"
    },
    {
      "type": "text",
      "id": "size_label3",
      "label": "Size label3",
      "default": "3"
    },
    {
      "type": "text",
      "id": "size_label4",
      "label": "Size label4",
      "default": "4"
    },
    {
      "type": "html",
      "id": "feature1",
      "label": "Feature1"
    },
    {
      "type": "html",
      "id": "feature2",
      "label": "Feature2"
    },
    {
      "type": "html",
      "id": "feature3",
      "label": "Feature3"
    },
    {
      "type": "html",
      "id": "html_1",
      "label": "html_1"
    },
    {
      "type": "html",
      "id": "html_2",
      "label": "html_2"
    },
    {
      "type": "html",
      "id": "html_3",
      "label": "html_3"
    }
  ],
  "presets": [
  {
    "name": "Twy product 600"
  }
]
}
{% endschema %}
